import React from 'react'
import { useState } from 'react';
import { useEffect } from 'react'

export default function EffectCom() {
  //声明状态
  let [count ,setCount] = useState(0);
  let [count2 ,setCount2] = useState(0);

  //模拟组件挂载完成的钩子
  useEffect(() => {
    console.log('组件挂载完毕');
  }, []);

  //模拟组件卸载的钩子
  useEffect(() => {
    //这里要返回一个函数, 这个函数相当于是 componentWillUnmount
    return () => {
      console.log('组 件 将要卸载...');
    }
  }, []);

  //模拟组件更新完成与组件挂载的钩子 
  //相当于 componentDidMount 与 componentDidUpdate
  // useEffect(() => {
  //   console.log('run run run...')
  // });

  //相当于是 componentDidMount 与 count 更新的钩子
  // useEffect(() => {
  //   console.log('run run run...')
  // }, [count, count2]);//第二个参数声明依赖项. 用来指定哪些状态发生变化之后, 再次执行回调函数

  //单独模拟 componentDidUpdate 
  useEffect(() => {
    //判断
    if(count === 0) return;
    console.log('运行了');
  }, [count]);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => {
        setCount(count + 1);
      }}>修改</button>

      <h2>{count2}</h2>
      <button onClick={() => {
        setCount2(count2 + 1);
      }}>修改</button>
    </div>
  )
}
